<template>
	<view>
		<view style="padding: 32rpx; margin-bottom: 4rpx; background: #fff">
			<view class="flex align-center" style="background: #f3f3f3; padding: 14rpx 24rpx">
				<view style="font-size: 0; margin-right: 14rpx">
					<image style="height: 40rpx; width: 40rpx" src="static/5.png"></image>
				</view>
				<input class="flex-1" @input="search" v-model="keywords" type="text" placeholder="搜索" />
			</view>
		</view>
		<view v-if="reviewList.length == 0" style="font-size: 26rpx; color: #999; text-align: center; padding-top: 30rpx">暂无数据!</view>
		<block v-else>
			<view v-for="(item, index) in reviewList" :key="index" style="padding: 20rpx 32rpx; border-bottom: 2rpx solid #f2f2f2; background: #fff">
				<view class="flex align-center justify-between">
					<view class="flex align-center">
						<view class="flex align-center">
							<view style="font-size: 0; margin-right: 20rpx">
								<image style="width: 84rpx; height: 84rpx; border-radius: 50%" :src="item.userinfo.avatar"></image>
							</view>
						</view>
						<view class="flex flex-clum justify-between" style="height: 84rpx">
							<view class="flex align-center" style="flex: 1">
								<view style="font-weight: 500; color: #333; font-size: 30rpx; margin-right: 20rpx">
									{{ item.userinfo.name || item.userinfo.nickname }}
								</view>
								<view class="flex align-center">
									<view style="font-size: 26rpx; color: #333">
										{{ item.userinfo.mobile }}
									</view>
									<view @click="call(item.userinfo.mobile)" style="font-size: 0; margin-left: 10rpx">
										<image style="width: 36rpx; height: 36rpx" src="static/13.png"></image>
									</view>
								</view>
							</view>
							<view v-if="item.is_apply" style="font-size: 24rpx; color: #999">自主申请</view>
							<view v-else style="font-size: 24rpx; color: #999">{{ item.puserinfo.name || item.puserinfo.nickname }}邀请</view>
						</view>
					</view>
					<view v-if="item.status == 2" class="flex align-center">
						<view @click="confirm(item, false)" style="font-size: 26rpx; color: #666; margin-right: 36rpx">拒绝</view>
						<view
							@click="confirm(item, true)"
							class="flex align-center justify-center"
							style="width: 92rpx; height: 52rpx; background: linear-gradient(154deg, #e4b77f 0%, #cd9c61 100%); border-radius: 8rpx; font-size: 26rpx; color: #fff"
						>
							同意
						</view>
					</view>
					<view v-else class="flex align-center justify-end">
						<view style="font-size: 26rpx; color: #999">{{ item.status_text }}</view>
					</view>
				</view>
				<view style="padding-top: 12rpx; font-size: 24rpx; color: #999">邀请时间：{{ get_dates(item.createtime) }}</view>
			</view>
		</block>
		<uni-popup ref="popup" type="center">
			<view class="dialog-container">
				<view class="title">再次确认</view>
				<view class="content">是否{{ btnType ? '同意' : '拒绝' }}{{ item.userinfo.name || item.userinfo.nickname }}加入店铺合伙人</view>
				<view class="btn-group">
					<view class="btn cancel" @click="agree(2)">取消</view>
					<view class="btn confirm" @click="agree(1)">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			reviewList: [],
			keywords: '',
			page: 1,
			lastPage: 0,
			shopId: 0,
			item: {},
			btnType: null
		};
	},
	onLoad(options) {
		this.shopId = options.shop_id;
		this.getReviewList();
	},
	onReachBottom() {
		if (this.page < this.lastPage) {
			this.page++;
			this.getReviewList();
		} else {
			this.$wanlshop.msg('我是有底线的');
		}
	},
	methods: {
		//二次确认
		confirm(item, type) {
			this.item = item;
			this.btnType = type;
			this.$refs.popup.open();
		},
		//同意
		agree(type) {
			// 点击的是取消按钮则关闭弹窗
			if (type == 2) {
				return this.$refs.popup.close();
			} else {
				//点击的是确定按钮，再判断是同意成为店铺会员还是拒绝成为店铺会员
				if (!this.btnType) {
					type = 2;
				}
			}
			uni.showLoading({
				title: '数据提交中···'
			});
			const item = this.item;
			this.$request({
				url: 'partners/shop_partner_refurn',
				method: 'POST',
				data: {
					id: item.id,
					type
				}
			}).then((res) => {
				if (res.data.code == 1) {
					if (type == 1) {
						uni.showToast({
							title: '已通过',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: '已拒绝',
							icon: 'none'
						});
					}
					this.page = 1;
					this.getReviewList();
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
				this.$refs.popup.close();
				uni.hideLoading();
			});
		},
		// 搜索
		search() {
			this.page = 1;
			this.getReviewList();
		},
		//拨打电话
		call(e) {
			uni.makePhoneCall({
				phoneNumber: e, //仅为示例
				success: (res) => {},
				fail: (res) => {}
			});
		},
		//审核列表
		getReviewList() {
			uni.showLoading({
				title: '数据请求中···'
			});
			this.$request({
				url: 'partners/sh_list',
				method: 'POST',
				data: {
					keyword: this.keywords,
					page: this.page,
					shop_id: this.shopId
				}
			}).then((res) => {
				const { code, data, msg } = res.data;
				if (code == 1) {
					data.data.forEach((item) => {
						if (item.userinfo) {
							item.userinfo.mobile = item.userinfo?.mobile?.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
						}
					});
					if (this.page == 1) {
						this.reviewList = data.data;
					} else {
						this.reviewList.push(...data.data);
					}
					this.lastPage = data.last_page;
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					});
				}
				uni.hideLoading();
			});
		}
	}
};
</script>
<style>
page {
	background: #f4f5f9;
}
</style>
<style scoped lang="scss">
.flex {
	display: flex;
}
.flex-1 {
	flex: 1;
}
.flex-clum {
	flex-direction: column;
}
.align-center {
	align-items: center;
}
.justify-around {
	justify-content: space-around;
}
.justify-between {
	justify-content: space-between;
}
.justify-center {
	justify-content: center;
}
.justify-end {
	justify-items: end;
}
.dialog-container {
	width: 600rpx;
	padding: 32rpx;
	background: #fff;
	border-radius: 32rpx;
	box-sizing: border-box;
	.title {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 12rpx;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 50rpx;
	}
	.content {
		padding: 32rpx 0;
		font-size: 30rpx;
		color: #666;
		line-height: 42rpx;
		text-indent: 2em;
	}
	.btn-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 32rpx;
		.btn:only-child {
			width: 100%;
		}
	}
	.btn {
		width: 260rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 30rpx;
		text-align: center;
		border-radius: 10rpx;
	}
	.confirm {
		background: #ebbe87;
		color: #fff;
	}
	.cancel {
		background: #f3f3f3;
		color: #333;
	}
}
</style>
